<template>
  <div class="rosePie">
    <div id="myChart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      list: [
        { value: 123, name: '视频广告' },
        { value: 110, name: '联盟广告' },
        { value: 320, name: '搜索引擎' },
        { value: 234, name: '邮件推销' },
        { value: 133, name: '直接访问' }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const dom = document.getElementById('myChart')
      // 初始化图表时可以定义主题（light、dark）
      const myChart = echarts.init(dom, 'dark')
      myChart.showLoading()
      const option = {
        // 设置背景颜色
        // backgroundColor: '#2c343c',
        // 全局调色盘。
        color: [
          '#c23531',
          '#2f4554',
          '#61a0a8',
          '#d48265',
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // 设置南丁格尔图（以数值大小绘制扇形区域大小）
            roseType: 'angle',
            radius: '55%',
            // 鼠标悬浮时高亮样式
            emphasis: {
              // 图形颜色
              itemStyle: {
                // color: 'blue'
              },
              // 高亮标签
              label: {
                show: true,
                formatter: 'You are here now!'
              }
            },
            data: this.list
          }
        ]
      }
      setTimeout(() => {
        myChart.hideLoading()
        myChart.setOption(option)
      }, Math.round(Math.random(10)) * 1000)
      console.log(myChart)
    }
  }
}
</script>
<style scoped>
.rosePie {
  width: 100vw;
  border: 1px solid;
  margin: auto;
}
#myChart {
  width: 400px;
  height: 400px;
}
</style>
